import React from 'react';
import { Form, Input, DatePicker } from 'antd';
import { Moment } from "moment";
import ASelect from '@/components/SelfComp/ASelect';
import QueryFilterForm from '@/components/SelfComp/QueryFilterForm';
import { CqListQueryParam } from '@/types/cq';
import { DataItem, QueryFormProps } from '@/types/global';
import { basicFormItemLangLayout } from '@/utils/commons';

export type CqListQueryProps = QueryFormProps & {
  auditorData: DataItem[],
  designerData: DataItem[],
  systemData: DataItem[];
  cqStatusData: DataItem[];
}

type CqListQueryForm = {
  cqCode: string;
  cqName: string;
  systemCode: string;
  auditor: string;
  designerA: string;
  status: string;
  prdDate: Moment;
  devDate: Moment[];
  sitDate: Moment[];
  uatDate: Moment[];
}

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const dateFormat: string = 'YYYY-MM-DD';

const CqListQueryForm: React.FC<CqListQueryProps> = (props) => {
  const handleSubmit = (record: CqListQueryForm) => {
    console.log('handleSubmit', record);
    const { devDate, sitDate, uatDate, prdDate: prdDateMoment, ...res } = record;
    let devStartDate = '';
    let devEndDate = '';
    let sitStartDate = '';
    let sitEndDate = '';
    let uatStartDate = '';
    let uatEndDate = '';
    let prdDate = '';
    if (devDate) {
      devStartDate = devDate[0].format(dateFormat).replaceAll('-', '');
      devEndDate = devDate[1].format(dateFormat).replaceAll('-', '');
    }
    if (sitDate) {
      sitStartDate = sitDate[0].format(dateFormat).replaceAll('-', '');
      sitEndDate = sitDate[1].format(dateFormat).replaceAll('-', '');
    }
    if (uatDate) {
      uatStartDate = uatDate[0].format(dateFormat).replaceAll('-', '');
      uatEndDate = uatDate[1].format(dateFormat).replaceAll('-', '');
    }
    if (prdDateMoment) {
      prdDate = prdDateMoment.format(dateFormat).replaceAll('-', '');
    }
    const values: CqListQueryParam = {
      ...res,
      devStartDate,
      devEndDate,
      sitStartDate,
      sitEndDate,
      uatStartDate,
      uatEndDate,
      prdDate
    }
    const { onSubmit } = props;
    if (onSubmit) {
      onSubmit({
        ...values
      });
    }
  }

  const { colon, loading, onReset } = props;
  const { systemData, auditorData, designerData, cqStatusData } = props;
  const formItemLayout = basicFormItemLangLayout;

  return (
    <QueryFilterForm
      colon={colon}
      loading={loading}
      onSubmit={handleSubmit}
      onReset={onReset}
    >
      <FormItem label="需求编号" name='cqCode' {...formItemLayout} colon={colon}>
        <Input placeholder='支持模糊查询'/>
      </FormItem>
      <FormItem label="需求名称" name='cqName' {...formItemLayout} colon={colon}>
        <Input placeholder='支持模糊查询'/>
      </FormItem>
      <FormItem label="所属系统" name='systemCode' {...formItemLayout} colon={colon}>
        <ASelect dataSource={systemData} />
      </FormItem>
      <FormItem label="审核人(主开)" name='auditor' {...formItemLayout} colon={colon}>
        <ASelect dataSource={auditorData} />
      </FormItem>
      <FormItem label="设计人员" name='designerA' {...formItemLayout} colon={colon}>
        <ASelect dataSource={designerData} />
      </FormItem>
      <FormItem label="需求状态" name='status' {...formItemLayout} colon={colon}>
        <ASelect dataSource={cqStatusData} />
      </FormItem>
      <FormItem label="投产时间" name='prdDate' {...formItemLayout} colon={colon}>
        <DatePicker format={dateFormat} style={{ width: '100%' }} />
      </FormItem>
      <FormItem label="DEV起止时间" name='devDate' {...formItemLayout} colon={colon}>
        <RangePicker format={dateFormat} style={{ width: '100%' }}/>
      </FormItem>
      <FormItem label="SIT起止时间" name='sitDate' {...formItemLayout} colon={colon}>
        <RangePicker format={dateFormat} style={{ width: '100%' }}/>
      </FormItem>
      <FormItem label="UAT起止时间" name='uatDate' {...formItemLayout} colon={colon}>
        <RangePicker format={dateFormat} style={{ width: '100%' }}/>
      </FormItem>
    </QueryFilterForm>
  );
}

export default CqListQueryForm;